<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="format-detection" content="telephone=yes"/>
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="keywords" content="${keywords}" />
  <meta name="description" content="${description}" />
  <!-- 360默认极速模式 -->
  <meta name=”renderer” content=”webkit” />
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/border.css" />
  <link rel="stylesheet" href="./css/font/iconfont.css" />
  <link rel="stylesheet" href="./css/base.css" />
  <link rel="stylesheet" href="./css/font/stylesheet.css" />
  <link rel="stylesheet" href="./css/footer.css" />
  <link rel="stylesheet" href="./js/wow.js/css/libs/animate.css" />
  <link rel="stylesheet" href="./js/swiper/css/swiper.css" />
  <link rel="stylesheet" href="./css/header.css" />
  <link rel="stylesheet" href="./css/swiper-reset.css" />
  <link rel="stylesheet" href="./css/flex.css" />
  <link rel="stylesheet" href="./css/oem.css" />
  <title>${tile}</title>
</head>

<body>
  <header class="header">
    <div class="header-top">
      <div class="logo"><img src="./image/logo.png" alt="" /></div>
      <span class="iconfont icon-caidan"></span>
      <div class="hide" id="navs">
        <div id="cover"></div>
        <div class="navs-content">
          <ul class="nav">
            <li class="nav-item"><a href="/">首页</a></li>
            <li class="nav-item"><a class="arrow" href="#">教育数字化产品与服务</a>
              <ul class="sub-nav">
                <li><a href="/huahan/oem">必过在线OEM平台</a></li>
                <li><a href="/huahan/teachers">全科目数字化课程产品</a></li>
                <li><a href="http://www.e-xiaot.com/" target="_blank">E校通教育与知识数字化工具</a></li>
                <li><a href="/huahan/edu">教务数字化管理系统</a></li>
                <li><a href="/huahan/crm">CRM数字化营销系统</a></li>
                <li><a href="/huahan/student">学员数字化学习服务</a></li>
              </ul>
            </li>
            <li class="nav-item"><a class="arrow" href="#">行业解决方案</a>
              <ul class="sub-nav">
                <li><a href="/huahan/solution?tab=1">职业资格证</a></li>
                <li><a href="/huahan/solution?tab=2">学历教育</a></li>
                <li><a href="/huahan/solution?tab=3">教育机构</a></li>
                <li><a href="/huahan/solution?tab=4">企业培训</a></li>
                <li><a href="/huahan/solution?tab=5">知识付费</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="arrow" href="#">关于华翰</a>
              <ul class="sub-nav">
                <li><a href="/huahan/about">华翰故事</a></li>
                <li><a href="/huahan/brandDynamic?categoryId=1&page=1">品牌动态</a></li>
                <li><a href="/huahan/conncetUs">联系我们</a></li>
              </ul>
            </li>
          </ul>
          <div class="action">
            <a href="http://oem.beegoedu.com/oemv2/login" target="_blank">
              <div class="btn btn-login">登录</div>
            </a>
            <a href="http://oem.beegoedu.com/oemv2/reg" target="_blank">
              <div class="btn btn-try">试用</div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div class="platform-container">
    <div class="wrapper">
      <div class="title-top flex-center  wow fadeInUp" data-wow-duration="1s">
        <div>免费搭建机构专属数字化网校平台</div>
      </div>
      <div class="content">
        <div class="top flex-center">
          <div class="item flex-center2 ">
            <img class="wow bounceInLeft" data-wow-duration="1s" src="./image/platform-1.png" alt="专属APP">
            <span class="wow bounceInLeft" data-wow-duration="1s" data-wow-delay="0.05s">专属APP</span>
          </div>
          <div class="item flex-center2">
            <img class="wow bounceInLeft" data-wow-duration="1s" data-wow-delay="0.1s" src="./image/platform-2.png"
              alt="专属小程序">
            <span class="wow bounceInLeft" data-wow-duration="1s" data-wow-delay="0.15s">专属小程序</span>
          </div>

        </div>
        <div class="top flex-center">

          <div class="item flex-center2 ">
            <img class="wow bounceInRight" data-wow-duration="1s" data-wow-delay="0.2s" src="./image/platform-3.png"
              alt="专属微信H5">
            <span class="wow bounceInRight" data-wow-duration="1s" data-wow-delay="0.25s">专属微信H5</span>
          </div>
          <div class="item flex-center2 wow bounceInRight" data-wow-duration="1s" data-wow-delay="0.3s">
            <img src="./image/platform-4.png" alt="专属课程商城">
            <span>专属课程商城</span>
          </div>
        </div>
        <div class="top flex-center">
          <div class="item flex-center2">
            <img class=" wow bounceInLeft" data-wow-duration="1.5s" src="./image/platform-5.png" alt="专属的机构管理后台">
            <span class="wow bounceInLeft" data-wow-duration="1.5s" data-wow-delay="0.05s">专属的机构管理后台</span>
          </div>
          <div class="item flex-center2 wow bounceInLeft" data-wow-duration="1s" data-wow-delay="0.1s">
            <img class="wow bounceInLeft" data-wow-duration="1s" data-wow-delay="0.1s" src="./image/platform-6.png"
              alt="专属的自定义收款账户">
            <span class="wow bounceInLeft" data-wow-duration="1s" data-wow-delay="0.15s">专属的自定义收款账户</span>
          </div>

        </div>
        <div class="bottom flex-center">
          <div class="item flex-center2 ">
            <img class="wow bounceInRight" data-wow-duration="1s" data-wow-delay="0.2s" src="./image/platform-7.png"
              alt="专属的PC网校和域名">
            <span class="wow bounceInRight" data-wow-duration="1s" data-wow-delay="0.25s">专属的PC网校和域名</span>
          </div>
          <div class="item flex-center2 ">
            <img class="wow bounceInRight" data-wow-duration="1.5s" data-wow-delay="0.3s" src="./image/platform-8.png"
              alt="专属课程添加机构LOGO">
            <span class="wow bounceInRight" data-wow-duration="1.5s" data-wow-delay="0.35s">专属课程添加机构LOGO</span>
          </div>
        </div>
      </div>
      <div class="more-experience wow bounceIn" data-wow-duration="1s" data-wow-delay="0.4s">
        <a href="http://oem.beegoedu.com/oemv2/reg" target="_blank"><span>马上体验</span></a>
      </div>
    </div>
  </div>
  <div class="class-container">
    <div class="wrapper">
      <div class="title-top flex-center  wow fadeInUp" data-wow-duration="1s">
        <div>汇聚3000+资深名师，超过1500门海量课程</div>
      </div>
      <div class="tab-wrapper flex-center">
        <div class="tab-btn active">职业资格</div>
        <div class="tab-btn">学历提升</div>
      </div>
      <div class="tab-content show-content">
        <div class="top ">
          <div class="tab-item flex">
            <div class="left">
              <img src="./image/yinliming.png" alt="阴黎明">
            </div>
            <div class="right">
              <div class="name flex-center1">
                <span>阴黎明</span>
                <span class="orange">教师类</span>
              </div>
              <div class="introduction">
                <div class="main-project">主讲：人力资源管理自考本科</div>
                <div class="note">教师入编培训7年经验，4年大机构全职讲师，3年全国自由讲师。 讲课风格:幽默风趣，深入浅出，擅长用大量记忆口诀，帮助学生快速记忆，受到学员好评。
                  每年讲课平均150天以上。周末精讲、短期集训、长期集训等课均有丰富教学经验…</div>
              </div>
              <div class="more">
                <a href="/huahan/teachers">
                  <span>查看更多</span>
                </a>
              </div>
            </div>
          </div>
          <div class="tab-item flex">
            <div class="left">
              <img src="./image/lilijun.png" alt="李立军">
            </div>
            <div class="right">
              <div class="name flex-center1">
                <span>李立军</span>
                <span class="green">建筑类</span></span>
              </div>
              <div class="introduction">
                <div class="main-project">主讲：建筑工程管理与实务</div>
                <div class="note">
                  副教授/博士，执业资格考试辅导名师，多年参与建造师、造价工程师、监理工程师案例实务课程的阅卷与题库建设工作。具有丰富的教学及应试培训经验，以授课生动、知识点凝炼、考点把握精准而深受广大学员的喜爱。被学员称为“押题王”，多次押中考试大题。
                </div>
              </div>
              <div class="more">
                <a href="/huahan/teachers">
                  <span>查看更多</span>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="center">
          <div class="tab-item flex">
            <div class="left">
              <img src="./image/xuchengbing.png" alt="储成兵">
            </div>
            <div class="right">
              <div class="name flex-center1">
                <span>储成兵</span>
                <span class="blue">财会类</span></span>
              </div>
              <div class="introduction">
                <div class="main-project">主讲：会计</div>
                <div class="note">
                  全国著名考研政治辅导专家，考研行业资深辅导名师，学途考研政治首席独家主讲名师，考研热销书“米鹏考研政治辅导”系列图书主编，考研政治辅导领域讲课和押题双料冠军，在考研政治辅导领域耕耘18年，出版考研政治图书累计3000余万字，培训学员超300万人，融会贯通考研政治五科内容，讲课诙谐幽默、重点突出，尤擅考前预测…
                </div>
              </div>
              <div class="more">
                <a href="/huahan/teachers">
                  <span>查看更多</span>
                </a>
              </div>
            </div>
          </div>
          <div class="tab-item flex">
            <div class="left">
              <img src="./image/likaiyuan.png" alt="李开源">
            </div>
            <div class="right">
              <div class="name flex-center1">
                <span>李开源</span>
                <span class="orange">金融类</span></span>
              </div>
              <div class="introduction">
                <div class="main-project">主讲：初中级经济师</div>
                <div class="note">主讲课程：初中级经济师、证券从业考试、银行从业考试、金融理财师 AFP、基金从业考试、初中级会计职称等课程。
                  武汉大学金融学硕士，高级金融讲师，上海第一财经广播特约评论嘉宾，中华会计网校、东奥、环球、高顿等知名网校签约教师，具有丰富的培训经验。</div>
              </div>
              <div class="more">
                <a href="/huahan/teachers">
                  <span>查看更多</span>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom ">
          <div class="tab-item flex">
            <div class="left">
              <img src="./image/lihaogang.png" alt="黎皓罡">
            </div>
            <div class="right">
              <div class="name flex-center1">
                <span>黎皓罡</span>
                <span class="green">语言类</span></span>
              </div>
              <div class="introduction">
                <div class="main-project">主讲：英语</div>
                <div class="note">雅思双科满分，十年面授经验。 教学内容严谨，打下坚实基础； 教学风格幽默，激发学习兴趣。 拥有英文思维，成绩快速提升； 拥有国际视野，素质全面提升。</div>
              </div>
              <div class="more">
                <a href="/huahan/teachers">
                  <span>查看更多</span>
                </a>
              </div>
            </div>
          </div>
          <div class="tab-item flex">
            <div class="left">
              <img src="./image/zhutiehan.png" alt="朱铁汉">
            </div>
            <div class="right">
              <div class="name flex-center1">
                <span>朱铁汉</span>
                <span class="blue">软件类</span></span>
              </div>
              <div class="introduction">
                <div class="main-project">主讲：软件工程</div>
                <div class="note">在读博士 副教授、高级工程师。从教十九年，对信息化、智慧物联网研究颇深，项目管理、系统集成考证培训专家，五年辅助上千学员取得证书</div>
              </div>
              <div class="more">
                <a href="/huahan/teachers">
                  <span>查看更多</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-content hidden-content">
        <div class="top">
          <div class="tab-item flex">
            <div class="left">
              <img src="./image/luqisheng.png" alt="卢祺胜">
            </div>
            <div class="right">
              <div class="name flex-center1">
                <span>卢祺胜</span>
                <span class="orange">自学考试</span>
              </div>
              <div class="introduction">
                <div class="main-project">主讲：人力资源管理自考本科</div>
                <div class="note">中级经济师，香港公开大学MBA ，一级人力资源管理师，一级劳动关系协调员，长期致力于自考课程的研究，积累了丰富的教学经验，课程内容重点突出，多年来一直深受广大学员的喜爱。
                </div>
              </div>
              <div class="more">
                <a href="/huahan/teachers">
                  <span>查看更多</span>
                </a>
              </div>
            </div>
          </div>
          <div class="tab-item flex">
            <div class="left">
              <img src="./image/liuling.png" alt="刘玲">
            </div>
            <div class="right">
              <div class="name flex-center1">
                <span>刘玲</span>
                <span class="green">成人高考</span></span>
              </div>
              <div class="introduction">
                <div class="main-project">主讲：成考高起点语文</div>
                <div class="note">
                  双一流高校汉语国际教育硕士，高级培训讲师，多年来从事成人教育行业工作，有丰富的自考课程的教学经验。结合考试大纲及自己多年辅导经验，授课深入浅出，让考生能在最短的时间内掌握重点内容。</div>
              </div>
              <div class="more">
                <a href="/huahan/teachers">
                  <span>查看更多</span>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="center">
          <div class="tab-item flex">
            <div class="left">
              <img src="./image/mipeng.png" alt="米鹏">
            </div>
            <div class="right">
              <div class="name flex-center1">
                <span>米鹏</span>
                <span class="blue">研究生入学考试</span></span>
              </div>
              <div class="introduction">
                <div class="main-project">主讲：考研政治</div>
                <div class="note">
                  全国著名考研政治辅导专家，考研行业资深辅导名师，学途考研政治首席独家主讲名师，考研热销书“米鹏考研政治辅导”系列图书主编，考研政治辅导领域讲课和押题双料冠军，在考研政治辅导领域耕耘18年，出版考研政治图书累计3000余万字，培训学员超300万人，融会贯通考研政治五科内容，讲课诙谐幽默、重点突出，尤擅考前预测…
                </div>
              </div>
              <div class="more">
                <a href="/huahan/teachers">
                  <span>查看更多</span>
                </a>
              </div>
            </div>
          </div>
          <div class="tab-item flex">
            <div class="left">
              <img src="./image/chenlifang.png" alt="陈丽芳">
            </div>
            <div class="right">
              <div class="name flex-center1">
                <span>陈丽芳</span>
                <span class="orange">专升本</span></span>
              </div>
              <div class="introduction">
                <div class="main-project">主讲：专升本英语</div>
                <div class="note">毕业于汕头大学语言文学专业，从事英语教学工作12年，有丰富的英语教学和培训经验， 曾获得院级教学大赛3等奖和辅导学生参加全国英语竞赛广东赛区1等奖，并获得“最佳指导老师”…
                </div>
              </div>
              <div class="more">
                <a href="/huahan/teachers">
                  <span>查看更多</span>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="tab-item flex">
            <div class="left">
              <img src="./image/tangtang.png" alt="庞庞">
            </div>
            <div class="right">
              <div class="name flex-center1">
                <span>庞庞</span>
                <span class="green">语言类</span></span>
              </div>
              <div class="introduction">
                <div class="main-project">主讲：英语</div>
                <div class="note">武汉大学博士； 2011年以总分430（本专业全国第一）的成绩考入武汉大学就读，获文学硕士学位；
                  2012年获首届新东方教学达人秀冠军，2015年获新东方集团优秀教师；2015开始任武汉新东方考研英语词汇板块教研负责人； 2015年获剑桥TKT证书…</div>
              </div>
              <div class="more">
                <a href="/huahan/teachers">
                  <span>查看更多</span>
                </a>
              </div>
            </div>
          </div>
          <div class="tab-item flex">
            <div class="left">
              <img src="./image/lilie.png" alt="李烈">
            </div>
            <div class="right">
              <div class="name flex-center1">
                <span>李烈</span>
                <span class="blue">考研数学</span></span>
              </div>
              <div class="introduction">
                <div class="main-project">主讲：考研数学</div>
                <div class="note">东南大学工学博士 十年考研数学授课经验，国内多个城市考研数学主讲老师，全科讲授高等数学、线性代数、概率统计、199数学联考等考研课程…</div>
              </div>
              <div class="more">
                <a href="/huahan/teachers">
                  <span>查看更多</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="crm-container">
    <div class="wrapper">
      <div class="title-top  flex-center  wow fadeInUp" data-wow-duration="1s">
        <div>CRM数字化营销管理，助推招生业绩乘风破浪</div>
      </div>

      <div class="bottom-content">
        <div class="bottom-item">
          <img class="item-img wow fadeInUp50" data-wow-duration="1s" data-wow-delay="0.2s" src="./image/icon-add.png"
            alt="推广招新">
          <div class="item-title wow fadeInUp50" data-wow-duration="1s" data-wow-delay="0.4s">推广招新</div>
          <div class="item-description wow fadeInUp50" data-wow-duration="1s" data-wow-delay="0.6s">拼团、秒杀、优惠券、打折卡、营销海报、
            直播引流、课程引流</div>
        </div>
        <div class="bottom-item">
          <img class="item-img wow fadeInUp50" data-wow-duration="1s" data-wow-delay="0.4s" src="./image/icon-crown.png"
            alt="会员营销">
          <div class="item-title wow fadeInUp50" data-wow-duration="1s" data-wow-delay="0.4s">会员营销</div>
          <div class="item-description wow fadeInUp50" data-wow-duration="1s" data-wow-delay="0.4s">积分体系、层级分销、会员卡、会员私域
          </div>
        </div>
        <div class="bottom-item">
          <img class="item-img wow fadeInUp50" data-wow-duration="1s" data-wow-delay="0.3s"
            src="./image/icon-document.png" alt="学员CRM">
          <div class="item-title wow fadeInUp50" data-wow-duration="1s" data-wow-delay="0.5s">学员CRM</div>
          <div class="item-description wow fadeInUp50" data-wow-duration="1s" data-wow-delay="0.7s">
            学员数据管理、访客计划、跟进记录、数据与趋势分析</div>
        </div>
      </div>
      <div class="more-experience wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.1s">
        <a href="/huahan/crm"><span>查看更多</span></a>
      </div>
    </div>
  </div>

  <div class="edu-container">
    <div class="wrapper">
      <div class="title-top flex-center wow fadeInUp" data-wow-duration="1s" data-wow-offset="100">
        <div>教务管理数字化，教、学、考、管，平稳，高效，省心</div>
      </div>
    </div>
    <div class="content">
      <div class="module">
        <div class="module-wrapper">
          <div class="module-title">教</div>
          <div class="module-description">课程直播、课程录播、教学互动、在线答疑</div>
        </div>
      </div>
      <div class="module">
        <div class="module-wrapper">
          <div class="module-title">学</div>
          <div class="module-description">学习定制、多终端入口、章节练习、考点串讲</div>
        </div>
      </div>
      <div class="module">
        <div class="module-wrapper">
          <div class="module-title">考</div>
          <div class="module-description">考试计划、考务管理、题库测评、成绩管理</div>
        </div>
      </div>
      <div class="module">
        <div class="module-wrapper">
          <div class="module-title">管</div>
          <div class="module-description">报名管理、缴费管理、教学排课、班级管理</div>
        </div>
      </div>
    </div>
  </div>
  <div class="scene-container">
    <div class="title-top flex-center wow fadeInUp" data-wow-duration="1s"><span>多终端学习场景，随时随地学习</span></div>
    <div class="description  wow backInUp" data-wow-duration="1s" data-wow-delay="0.2s">
      掌上课堂智能化学习，10类功能模块辅助学习更高效：错题本、收藏夹、课程介绍、学习进度、课件下载、 串讲视频、精讲视频、章节练习、模拟考试、考点串讲</div>
    <div class="content flex-center2">
      <div class="content-item">
        <img class="item-img  wow bounceInLeft" data-wow-duration="1s" data-wow-delay="0.2s"
          src="./image/scene-icon1.png" alt="pc端网校">
        <span class="item-title wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.25s">pc端网校</span>
      </div>
      <div class="content-item">
        <img class="item-img wow bounceInLeft" data-wow-duration="1s" data-wow-delay="0.3s"
          src="./image/scene-icon2.png" alt="移动端APP">
        <span class="item-title wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.35s">移动端APP</span>
      </div>
    </div>
    <div class="content flex-center2">
      <div class="content-item">
        <img class="item-img wow bounceInRight" data-wow-duration="1s" data-wow-delay="0.5s"
          src="./image/scene-icon3.png" alt="H5网校">
        <span class="item-title wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.25s">H5网校</span>
      </div>
      <div class="content-item">
        <img class="item-img wow bounceInRight" data-wow-duration="1s" data-wow-delay="0.3s"
          src="./image/scene-icon4.png" alt="小程序">
        <span class="item-title wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.35s">小程序</span>
      </div>
    </div>
    <!-- <div class="more-btn wow fadeIn" data-wow-duration="1s" data-wow-delay="0.3s">
      <a href="/huahan/student">更多功能</a>
    </div> -->
  </div>

  <footer class="footer">
    <div class="footer-container">
      <div class="footer-wrapper">
        <div class="wxcode"><span>官方服务号</span><img src="./image/service.png" alt="华翰科技官方服务号"></div>
        <div class="wxcode"><span>官方订阅号</span><img src="./image//subscription.png" alt="华翰科技官方订阅号"></div>
      </div>
      <div class="phone">
        <span>全国免费咨询服务热线</span>
        <div class="number">400-001-5920</div>
      </div>
      <div class="footer-bottom">
        <div class="address">总部地址：<div>广东省广州市高新技术开发区科汇金谷四街11号9层</div>
        </div>
        <div class="service-center">全国营销服务中心：广州、深圳、北京、上海、苏州、南京、宁波、温州、济南、天津、合肥、郑州、石家庄、武汉、长沙、成都、重庆、昆明、西安、南宁</div>
        <div class="hr"></div>
        <ul class="copyright">
          <li><a href="/cert-c.html" target="_blank">增值电信业务经营许可</a></li>
          <li><a href="/cert-a.html" target="_blank">广播电视节目经营许可</a></li>
          <li><a href="/cert-b.html" target="_blank">网络安全等级保护许可 </a></li>
          <li><a href="http://beian.miit.gov.cn" target="_blank">CIP备案号 13083939号</a></li>
          <li><a href="/cert-d.html" target="_blank">营业执照</a></li>
          <li><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44011202000209" target="_blank">公安备号
              44011202000209号</a></li>
          <li><a href="/cert-e.html" target="_blank">出版物经营许可证</a></li>
        </ul>
      </div>
    </div>
    <div class="bottom">&#169 2013-2021 必过在线教育OEM ALL RIGHTS RESERVED. <div>广州华翰教育科技有限公司 版权所有</div>
    </div>
  </footer>
  <div class="fixed-container">
    <div class="fixed-wrapper">
      <div class="fixed-hover fixed-item" id="zhuanshu">
        <span class="col">专属客服</span>
      </div>
      <div class="fixed-hover fixed-item show-phone">
        <a href="tel:400-001-5920">
          <div class="img"></div>
          <span>咨询电话</span>
        </a>
      </div>
      <div class="fixed-hover fixed-item" id="consult">
        <div class="img"></div>
        <span>在线咨询</span>
      </div>
      <div class="fixed-hover fixed-item">
        <a class="flex-column-center" href="/huahan/zixun" target="_blank">
          <div class="img"></div>
          <span>获取方案</span>
        </a>
      </div>
    </div>
  </div>
  <script src="./js/wow.js/dist/wow.min2.js"></script>
  <script src="./js/jquery-3.3.1/jquery-3.3.1.min.js"></script>
  <script src="./js/fixed.js"></script>
  <script src="./js/header.js"></script>
  <script type="text/javascript">
    new WOW().init();
    $('.tab-btn').on('click', function () {
      const index = $(this).index()
      if ($(this).hasClass('active')) return
      $(this).addClass('active').siblings().removeClass('active')
      console.log('111', $('.tab-content').eq(index))
      $('.tab-content').eq(index).removeClass('hidden-content').addClass('show-content').siblings('.tab-content')
        .removeClass('show-content').addClass('hidden-content')
    })
  </script>
</body>

</html>